<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    h1{
      height: 48px;
      background: red;
      color: white;
      font-size: 26px;
      text-align: center;
      line-height: 48px;
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
    }
    li{
      list-style: none;
      display: flex;
      border-bottom: 2px solid #ccc;
      padding: 10px 0;
    }
    li input{
      width: 20px;
      height: 20px;
      margin-top: 50px;
    }
    li .shop{
      flex: 1;
      display: flex;
    }
    li .shop img{
      width: 80px;
      height: 120px;
      margin: 0 20px;
    }
    .shop .wenzi{
      flex: 1;
    }
    h4{
      padding-bottom: 20px;
    }
    .shop .wenzi button{
      width: 20px;
      height: 20px;
    }
    #allshop{
      height: 50px;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: black;
      color: white;
    }
    .shopcart{
      height: calc(100vh-48px-50px);
      overflow: auto;
      margin-top: 50px;
    }
  </style>
  <script src="../vue.js"></script>
</head>
<body>
  <div id="app">
    <h1>购物车</h1>
    <div class="shopcart">
      <ul>
        <li v-for="(item,index) in list">
          <input type="checkbox" v-model="item.isChecked">
          <div class="shop">
            <img :src="item.show.img" alt="">
            <div class="wenzi">
              <h4>{{item.title}}</h4>
              <p>
                <span>商品单价：{{item.price}}</span>
                <button @click="item.num++">+</button>
                <span>{{item.num}}</span>
                <button @click="nn(index)">-</button>
              </p>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div id="allshop">
      <h3>一共买了{{allNum}}件商品 总价：{{allPrice | toFixed}}<button>购买</button></h3>
    </div>
  </div>
  <script src="./1.js"></script>
  <script>
    let app=new Vue({
      el:"#app",
      data:{
        list:[]
      },
      created(){
        list.data.list.forEach(item=>{
          item.num=1
          item.isChecked=true
        })
        this.list=list.data.list
      },
      mounted() {
        console.log(this.list);
      },
      methods: {
        nn(index){
          if(this.list[index].num>1){
            this.list[index].num--
          }
        }
      },
      computed:{
        allNum(){
          let shopnum=this.list.filter(item=>item.isChecked)
          return shopnum.reduce((a,b)=>{
            return a+b.num
          },0)
        },
        allPrice(){
          let shopnum=this.list.filter(item=>item.isChecked)
          return shopnum.reduce((a,b)=>{
            return a+b.price*b.num
          },0)
        }
      },
      filters:{
        toFixed(v){
          return v.toFixed(2)
        }
      }
    })
  </script>
</body>
</html>